<template>
  <div class="policy-container">
    <div class="policy-card relative">
      <Logo class="absolute top-6 left-6" size="small" />

      <div class="policy-header">
        <h1 class="policy-title">用户协议</h1>
        <p class="policy-date">最后更新日期：{{ new Date().toLocaleDateString() }}</p>
      </div>

      <div class="policy-content">
        <section class="policy-section">
          <h2 class="section-title">1. 协议的接受与修改</h2>
          <p>
            欢迎您使用电商工具助手服务。本协议是您与电商工具助手之间关于使用电商工具助手平台服务所订立的协议。请您仔细阅读本协议，您点击"同意"按钮或使用/继续使用本服务，均视为您已理解并同意本协议。
          </p>
          <p>
            我们保留在必要时修改本协议条款的权利。对本协议的修改将通过网站公告或电子邮件通知的形式告知。如您不同意相关变更，请停止使用我们的服务。
          </p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">2. 账号注册与安全</h2>
          <p>您在使用本服务前需要注册账号。您应当提供真实、准确、完整的个人资料，并在资料变更时及时更新。</p>
          <p>
            您应对账号安全负责，应妥善保管账号及密码信息，因您保管不善可能导致的任何损失由您自行承担。如发现任何未经授权使用您账号或其他安全漏洞，应立即通知我们。
          </p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">3. 用户行为规范</h2>
          <p>您应遵守中华人民共和国相关法律法规，不得利用本服务从事违法违规行为，包括但不限于：</p>
          <ol class="policy-list">
            <li>1. 发布、传送、传播、储存违反国家法律法规的信息</li>
            <li>2. 侵害他人知识产权、商业秘密等合法权益</li>
            <li>3. 利用本服务进行任何可能对互联网正常运转造成不利影响的行为</li>
            <li>4. 上传或发布计算机病毒、恶意代码或其他破坏性程序</li>
            <li>5. 其他违反法律法规、社会公德的行为</li>
          </ol>
        </section>

        <section class="policy-section">
          <h2 class="section-title">4. 服务内容与限制</h2>
          <p>电商工具助手提供的服务包括但不限于：SKU生成器、标题生成器等电商相关工具服务。</p>
          <p>
            您理解并同意，我们有权对服务内容进行变更，或暂停、终止部分或全部服务。对于免费服务，我们不对服务的及时性、安全性、准确性作出任何承诺。
          </p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">5. 知识产权</h2>
          <p>
            本服务涉及的所有知识产权均归电商工具助手或其关联公司所有。未经我们明确书面许可，您不得复制、修改、编译或创造与本服务相关的衍生产品。
          </p>
          <p>对于您通过本服务发布的内容，您保证对其拥有合法权利。您同意授予我们使用、复制、修改、发布、传播该内容的权利。</p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">6. 免责声明</h2>
          <p>您理解并同意，在法律允许的最大范围内：</p>
          <p>本服务是按照现有技术和条件提供的，我们不保证服务的稳定性、准确性、及时性，也不对服务的中断或终止负责。</p>
          <p>对于因通过本服务获取的信息或资料导致的任何损失，我们不承担责任。您自行承担使用本服务的风险。</p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">7. 协议终止</h2>
          <p>您有权通过注销账号的方式终止本协议。</p>
          <p>您严重违反本协议或相关法律法规，我们有权暂停或终止向您提供服务，终止本协议。</p>
        </section>

        <section class="policy-section">
          <h2 class="section-title">8. 法律适用与争议解决</h2>
          <p>本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>
          <p>如发生本协议相关的任何争议，应首先通过友好协商解决；协商不成的，任何一方均有权将争议提交至人民法院诉讼解决。</p>
        </section>
      </div>

      <div class="policy-footer">
        <button class="return-btn cursor-pointer" @click="navigateTo('/register')">返回注册</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ layout: 'auth' });
</script>

<style scoped>
.policy-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #f5f3ff 0%, #e0e7ff 100%);
}

.policy-card {
  background: white;
  width: 100%;
  max-width: 800px;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(107, 70, 193, 0.1);
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.logo-container:hover {
  transform: scale(1.05);
}

.logo-image {
  width: 28px;
  height: 28px;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
}

.policy-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.policy-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-purple, #6b46c1);
  margin-bottom: 0.5rem;
}

.policy-date {
  color: var(--text-secondary, #64748b);
  font-size: 0.9rem;
}

.policy-content {
  margin-bottom: 2rem;
}

.policy-section {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 1rem;
}

.policy-section p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--text-primary, #1e293b);
}

.policy-list {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.policy-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  color: var(--text-primary, #1e293b);
}

.policy-footer {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-purple, #6b46c1);
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(107, 70, 193, 0.2);
}

.return-btn:hover {
  background-color: var(--secondary-purple, #805ad5);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(107, 70, 193, 0.3);
}

@media (max-width: 640px) {
  .policy-card {
    padding: 1.5rem;
  }
}
</style>
